<template>
	<view class="page">
		<u-image show-loading :src="$imageOss(detail.image)" width="100%" height="248px" @click="preImage" />
		<view class="first">
			<Sub-title :label="detail.title" />
			<view class="addr" v-if="detail.tags">
				<view class="tag" v-for="(i,index) in detail.tags" :key="index" style="margin-right: 10rpx;">
					{{i}}
				</view>

			</view>
			<view class="addr">
				<view class="" style="margin-right: 6rpx;">
					<u-icon name="map-fill" size="12" color="#909090"></u-icon>
				</view>
				<view class="" @tap.stop="handleMap">
					{{address}}
				</view>
			</view>
		</view>
		<view class="line">

		</view>
		<view class="body">
			<u-scroll-list style="width: 100% !important;padding-bottom: 0;" :indicator="false">
				<view class="dayBox" style="display: flex;">
					<view class="navItem" v-for="(i,index) in dayList" :key="i.day"
						:style="{color:(tabCurrent == index?'#466EC5':'#000')}" @tap.stop="tabChange(index,i)">
						<view class="">
							{{i.week}}
						</view>
						<view class="" style="font-size: 25rpx;">
							{{i.month}}
						</view>
						<view class="bottomIcon" :style="{background:(tabCurrent == index?'#466EC5':'#fff')}"></view>
					</view>
				</view>
			</u-scroll-list>
			<view class="timeBox" style="display: flex;">
				<!-- dayCurrent == index -->
				<view class="navItem" v-for="(i,index) in timeList" :key="i.day"
					:style="{backgroundColor:i.disabled?'#D9D9D9':'#fff'}" :class="{'active':i.check }"
					@tap.stop="timeChange(index,i)">
					<view class="">
						{{i.times}}
					</view>
				</view>
			</view>
			<view class="navBox" style="">
				<view class="item" v-for="(i,index) in typeList" :key="index">
					<view class="" style="display: flex;align-items: center;margin: 10rpx 0;">
						<view class="leftIcon"></view>
						<view class="">
							{{i.name}}
						</view>
					</view>
					<u-parse :content="detail.content" style="color: #909090;font-size: 26rpx;" v-if="index==0" />
					<u-parse :content="detail.understand" style="color: #909090;font-size: 26rpx;" v-if="index==1" />
				</view>
			</view>
		</view>
		<view class="bott">
			<view class="button" @tap.stop="Jump"> 立即预定</view>
		</view>
	</view>
</template>

<script>
	import {
		venueSite
	} from "@/request/homeApi.js";
	export default {

		data() {
			return {
				dayList: [],
				timeList: [],
				tabCurrent: 0, // 当前大类
				typeList: [{
						name: "场地详情",
						id: "0",
					},
					{
						name: "预约须知",
						id: "1",
					}
				],
				detail: {},
				dayCurrent: '',
				lat: '',
				lng: '',
				address: '',
				application_time: '',
				time: '',
				Id:''
			};
		},
		onLoad(e) {
			this.lat = e.lat
			this.lng = e.lng
			this.address = e.address
			this.Id = e.Id
			this.getList(e.id);
			this.pp()
		},
		computed: {
			// 是否已过期
			timeout() {
				let end = Number(new Date(this.detail.end_time + " 23:59:59"));
				let now = Number(new Date());
				return now > end;
			},
		},
		// 监听页面滚动
		onPageScroll(scroll) {
			uni.$emit("onPageScroll", scroll.scrollTop);
		},
		methods: {
			pp() {
				//获取当前年月日
				var now = new Date();
				var year = now.getFullYear(); //得到年份
				var month = now.getMonth() + 1; //得到月份
				var date = now.getDate(); //得到日期
				var check = [];
				for (let i = 0; i < 7; i++) {
					//24 * 3600 * 1000 就是计算一天的时间  
					var date = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var day = date.getDate();
					var dt2 = new Date(now.getTime() + i * 24 * 3600 * 1000);
					var weekDay = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
					var weekDays = ["sunday", "monday", "tuesday", "wednesday", "thursday", "friday", "saturday"];

					check.push({
						date: year + "-" + month + "-" + day,
						month: month + "-" + day,
						day: day,
						weekday: weekDays[dt2.getDay()],
						week: weekDay[dt2.getDay()],
					});
				}
				this.dayList = check
				this.application_time = this.dayList[0].date
			},

			// tab 切换
			tabChange(e, item) {
				this.application_time = item.date
				this.tabCurrent = e
				let temp = this.detail.time_json[`${this.dayList[this.tabCurrent].weekday}`]
				this.timeList = temp.filter(i => i.times != '')
			},
			timeChange(e, item) {
				this.time = ''
				this.timeList.forEach((i, index) => {
					if (i.disabled) return
					if (index == e) {
						i.check = !i.check
					} else {
						i.check = false;
					}
				});
				this.timeList.forEach((i, index) => {
					if (i.check) {
						this.time = i.times
					}
				});
			},
			Jump() {
				if(this.time == ''){
					uni.showToast({
						title: "请选择时间",
						icon: "none",
					});
					return;
				}
				// uni.showToast({
				// 	title: "暂未开放",
				// 	icon: "none",
				// });
				// return;
				uni.navigateTo({
					url: `/pages/home/applyDetails?id=${this.detail.id}&application_time=${this.application_time}&time=${this.time}&type=order&nickname=${this.detail.title}&Id=${this.Id} `
				})
			},
			// 预览图片
			preImage() {
				uni.previewImage({
					urls: [this.detail.cover_img],
				});
			},
			// 跳转地图
			handleMap() {
				// let result = this.$store.dispatch("permission/requestPermissions",
				// 	'ACCESS_FINE_LOCATION')
				// if (result !== 1) return
				
				uni.openLocation({
					latitude: this.lat,
					longitude: this.lng,
					address: this.address,
					scale: 16,
				});
				uni.navigateTo({
					url: `/pages/parse/map?lat=${this.lat}&lng=${this.lng}`
				});
			},
			// 获取详情
			getList(id) {
				let that = this
				venueSite({
					id
				}).then((res) => {
					if (res.code == 200) {
						that.detail = res.data
						
						that.detail.tags = res.data.tags!=''?res.data.tags.split(','):''
						that.timeList = that.detail.time_json[`${this.dayList[0].weekday}`].filter(item => item
							.times != '')
						// that.time = that.timeList[0].times
					}else{
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none',
						})
					}
				});
			},
			// 买票
			handlePay() {
				if (this.timeout) {
					uni.showToast({
						title: "该活动已结束",
						icon: "none",
					});
					return;
				}
				this.$author(() => {
					uni.navigateTo({
						url: `/pages/home/ticketCheck?id=${this.detail.id}&type=subject`,
					});
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		.leftIcon {
			width: 6rpx;
			height: 30rpx;
			margin-right: 10rpx;
			background: #47578E;
		}

		.active {
			color: #466EC5 !important;
			border: 2rpx solid #466EC5 !important;
			background: #DAE2F3 !important;
		}

		.bott {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 110rpx;
			background: #fff;
			width: 100%;
			padding: 0 30rpx;
			box-shadow: 0 0 10rpx rgba(228, 228, 228, 0.5);
			box-sizing: border-box;
			z-index: 2;

			.button {
				width: 100%;
				height: 70rpx;
				padding: 0 28rpx;
				box-sizing: border-box;
				text-align: center;
				line-height: 70rpx;
				color: #fff;
				font-size: 28rpx;
				background-color: #6B8BD0;
				border-radius: 10rpx;
			}
		}

		.first {
			width: 94%;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin: 0rpx 24rpx 20rpx;

			.addr {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 26rpx;
				color: #909090;
				margin-bottom: 10rpx;

				.tag {
					background: #DAE2F3;
					color: #466EC5;
					padding: 6rpx 20rpx;
					border-radius: 50rpx;
					font-size: 24rpx;
				}
			}

		}

		.line {
			width: 100%;
			height: 12rpx;
			background: #D9D9D999;
		}

		.body {
			width: 94%;
			// padding: 20rpx 24rpx;
			min-height: 100rpx;
			box-sizing: border-box;
			background-color: #ffffff;
			margin-top: -14rpx;
			padding-bottom: 140rpx;
			margin: 0 24rpx;

			.dayBox {
				display: flex;
				justify-content: space-evenly;
				width: 100%;
				padding: 20rpx 0 0;
				box-sizing: border-box;
				text-align: center;
				font-size: 30rpx;

				.bottomIcon {
					width: 80rpx;
					height: 4rpx;
					margin: 10rpx auto;
				}

				.navItem {
					width: 20.83% !important;
					text-align: center !important;
				}
			}

			.timeBox {
				display: flex;
				justify-content: flex-start;
				width: 100%;
				box-sizing: border-box;
				text-align: center;
				font-size: 28rpx;
				flex-wrap: wrap;

				.navItem {
					width: 24% !important;
					text-align: center !important;
					background: #fff;
					border: 2rpx solid #D9D9D9;
					color: #909090;
					padding: 10rpx 15rpx;
					margin: 8rpx 12rpx;
					border-radius: 50rpx;
					font-size: 23rpx;
				}
			}

			.navBox {
				width: 100%;
				padding: 10rpx 0;
				box-sizing: border-box;
				font-size: 30rpx;

				.item {
					padding: 10rpx 0;
				}
			}

		}
	}
</style>